<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨域测试</title>
    <script src="../public/jqurey/jquery1.8.3.min.js"></script>
    <!--    $.toJSON使用的js-->
    <script src="../public/jqurey/jquery.json-2.4.js"></script>
</head>
<style>
    input {
        padding: 1em;
        margin: 0.5em;
        width: 15em;
        /*display: block;*/
    }
</style>
<body>
<div>
    <div>
        <input type="button" onclick="jsonP1()" value="JsonP测试$.ajax()">
        -->>
        <input type="text" readonly id="res1" placeholder="ajax请求结果">
    </div>
    <div>
        <input type="button" onclick="jsonP2()" value="JsonP测试$.getJson()">
        -->>
        <input type="text" readonly id="res2" placeholder="getJson请求结果">
    </div>
    <div>
        <input type="button" onclick="jsonP3()" value="JsonP测试原生JS">
        -->>
        <input type="text" readonly id="res3" placeholder="原生js请求结果">
    </div>
    <div>
        <input type="button" onclick="c()" value="POST测试$.ajax()">
        -->>
        <input type="text" readonly id="res4" placeholder="post请求结果">
    </div>
</div>


<script type="text/javascript">


    /**
     * 跨域测试 对应（AJaxCrossTest.java）
     *
     * 无论GET还是POS都需要后台支持
     *
     */

    /*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓GET（JSONP）方法 后台返回的结果字符串必须包含回调方法名，类似：jQuery18308904533666757874_1576201391124(结果数据) ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
    /*
    *  后台示例代码：
    *  public String ajax1(String paramA, String callback)
    *       throws Exception {
    *   String result =  "{'data':'true'}";
    *   //加上返回参数
    *   result=callback+"("+result+")";
    *   return result;
    *   }
    *
    */

    //第一种GET写法 --> ajax()
    function jsonP1() {
        //请求参数为字符串  请求方法为GET  可以采用jsonp来实现
        $.ajax({
            url: "http://localhost:8080/system/ajax1",
            data: {
                paramA: "test"
            },
            type: "GET",
            dataType: "jsonp",
            //jsonp的callback随便写 但是要和后台接收的参数名一样  最终传输的数据为callback=jQuery18308904533666757874_1576201391124
            jsonp: "callback",
            success: function (res) {
                console.log(res);
                $("#res1").val(res)
            }
        });
    }


    //第二种GET的写法  --> getJSON()
    function jsonP2() {
        //callback必须与后台接收的参数名相同，值必须为?，传输时Jquery会把问号自动替换成随机字符串
        $.getJSON("https://localhost:8090/responsesum/test?callback=?", {}, function (res) {
            console.log(res);
            $("#res2").val(res)
        });
    }


    //第三种GET的写法 --> 原生js
    function jsonP3() {
        //原生JS写法
        var script = document.createElement("script");
        script.src = "https://localhost:8090/responsesum/test?callback2=huidiao";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(script, s);
    }

    // 原生方法对应的回调方法必须要现在请求发起之前加载，否则会导致 Uncaught ReferenceError: huidiao is not defined
    function huidiao(res) {
        //{A: "wom", B: "baoma", C: "mimi"}，注意这里取到的是字符串，需要JSON.parse(result) 或 eval('(' + result + ')');转化为对象来处理
        console.log(res);
        $("#res3").val(res)
    }

    //原理测试代码
    // <script>
    //     function huidiao(res) {
    //         console.log(res)
    //     }
    // <\/script>
    // callback对应的函数 必须要写在最前面 保证先加载函数 后引入js
    // <script src="http://localhost:8080/system/ajax1?callback=huidiao"><\/script>-->

    /*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓POST方法 后台必须对请求头做跨域处理 或者使用跨域注解 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
    /**
     * 示例代码：
     *  response.setHeader("Access-Control-Allow-Origin", "*");
     *  response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
     *  response.setHeader("Access-Control-Max-Age", "3600");
     *  response.setHeader("Access-Control-Allow-Headers",
     *  "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With");
     *  response.setHeader("Access-Control-Allow-Credentials","true");
     *
     *  注解示例（需框架支持）：
     *  @CrossOrigin
     *
     */

    //POST写法
    function c() {
        // 请求参数为 对象 请求方法需要为POST  使用在服务器端设置允许的请求头方法来实现跨域操作
        var param = $.toJSON({
            "uuid": "fdsfd"
        });
        $.ajax({
            url: "http://localhost:8080/system/ajax2",
            data: param,
            contentType: "application/json",
            type: "POST",
            dataType: 'json',
            success: function (res) {
                console.log(res);
                $("#res4").val(res)

            }
        });
    }


</script>


</body>
</html>